<template>
  <view class="goods_page">
    <cl-nav-bar></cl-nav-bar>
    <view class="search">
      <uni-search-bar
        v-model="searchParams.name"
        style="flex: 1"
        radius="100"
        placeholder="请输入关键字进行搜索"
        cancelButton="none"
        @confirm="handleSearch"
        @clear="handleSearch"
      />
      <text class="pr_20 fs_26" @click="handleSearch">搜索</text>
    </view>
    <view class="goods_list">
      <cl-scroll-view
        :apiFun="getGoodsList"
        :params="searchParams"
        ref="listRef"
      >
        <template v-slot:list="{ list }">
          <view
            class="goods_list_item"
            v-for="(item, index) in list"
            :key="index"
            @click="_toPage('/pages/goods/detail?id=' + item.id)"
          >
            <image
              class="goods_list_item_image"
              :src="item.homeImgUrl"
              mode="aspectFill"
            />
            <view class="goods_list_item_info">
              <text class="goods_list_item_info_name exceed_omit_1">{{
                item.name
              }}</text>
              <view class="goods_list_item_info_des exceed_omit_2">{{
                item.des
              }}</view>
              <view
                style="
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                "
              >
                <!-- <view class="goods_list_item_info_label">
                <text
                  v-for="itm in item.labels"
                  :key="itm"
                  class="goods_list_item_info_label_item"
                  >{{ itm }}</text
                >
              </view> -->
                <view class="goods_list_item_info_price">
                  <text class="real">￥{{ item.actualPrice }}</text>
                  <text class="show">￥{{ item.showPrice }}</text></view
                >
              </view>
            </view>
          </view>
        </template>
      </cl-scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'

const searchParams = reactive({
  name: '',
  unTenant: true,
})

onLoad((option = {}) => {
  if (option.name) {
    searchParams.name = option.name
  }
})
const getGoodsList = (data) => {
  return uni.request({
    url: '/shop/goodsController/listOpen',
    method: 'GET',
    data,
    autoUnpack: false,
  })
}

const listRef = ref()
const handleSearch = () => {
  listRef.value.refresh()
}
</script>

<style lang="scss" scoped>
.goods_page {
  display: flex;
  flex-direction: column;
  height: 100%;
  .search {
    display: flex;
    align-items: center;
    background-color: #fff;
  }
  .goods_list {
    padding: 20rpx;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    &_item {
      display: flex;
      margin-bottom: 20rpx;
      padding: 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
      &_image {
        width: 150rpx;
        height: 150rpx;
        flex-shrink: 0;
      }
      &_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        &_name {
          font-size: 28rpx;
          font-weight: bold;
        }
        &_des {
          line-height: 36rpx;
          font-size: 24rpx;
        }
        &_label {
          display: flex;
          &_item {
            margin-right: 10rpx;
            font-size: 22rpx;
            border-radius: 6rpx;
            background: #81a9f0;
            color: #fff;
            padding: 2rpx 4rpx;
            box-sizing: border-box;
            flex-shrink: 0;
          }
        }
        &_price {
          font-size: 34rpx;
          color: #ff5000;
          .real {
            margin-right: 20rpx;
            font-size: 28rpx;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>
